import React, { Component } from 'react';
import Comchild from './ComChild';
import Comchildren from './ComChildren';
import Error from './Error';
import Boundary from './Boundary';

class Com extends Component {
  constructor() {
    super();
    this.state = {
      name: 'Tom',
      age: 18
    }
  }
  changeName() {
    this.setState({
      name: 'Tony'
    })
  }
  changeAge() {
    this.setState({
      age: 30
    })
  }
  render() {
    return (
      <div>
        <p>性能优化：减少操作dom的次数和数量。shouldComponentUpdate、componentWillUnmount</p>
        <p>classCom:purecomponent</p>
        <p>fn com: memo,通过这个函数，处理组件，达到性能优化的目的</p>
        <button onClick={() => this.changeName()}>修改name</button>
        <button onClick={() => this.changeAge()}>修改age</button>
        <Comchild name={this.state.name}></Comchild>
        <Comchildren name={this.state.name}></Comchildren>
        {/* 错误边界 */}
        {/* <Boundary>
          <Error></Error>
        </Boundary> */}
      </div>
    );
  }
}

export default Com;
